/* Styles for single tweet views */
	.single-tweet {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		@media (min-width: 768px) {
			width: 60%;
		} 
		@media (min-width: 992px) {
			width: 50%;
		} 
		@media (min-width: 1200px) {
			width: 40%;
		} 
		color: black;
		display: inline-block;
		background-color: white;
		padding: 10px;
		border-radius: 9px;
		img.avatar, .user-data-wrapper {
			display: inline-block;
			vertical-align: top;
		}
		.user-data-wrapper {
			height: 73px;
			box-sizing: border-box;
			padding: 11px 0px 11px 4px;
			line-height: 21px;
			.name, .screen-name {
				font-size: 1.5em;
				display: block;
			}	
		}
		img.avatar {
			width: 73px;
		}
		.top-metadata {
			width: 100%;
		}
		.tweet-content {
			width: 100%;
			display: inline-block;
			.tweet-content-text {
				font-size: 1.3em;
				line-height: 1.4em;
				margin-top: 10px;
			}
			.action-list {
				.rt-count, .fav-count {
					color: #8899A6;
					font-size: 12px;
					font-weight: bold;
					display: inline-block;
					height: 16px;
					margin-left: 5px;
					margin-top: 0;
					vertical-align: middle
				}
				display: inline-block;
				margin-top: 10px;
				> div {
					display: inline-block;
					margin-right: 31px;
				}
				.action-reply {
					button {
						border:none;
						width: 16px;
						height: 16px;
						background: url('../images/reply-sprite.png');
					}
					&:hover {
						button {
							background-position-x: 100%;
						}
					}
				}
				.action-favor {
					button {
						border:none;
						width: 16px;
						height: 16px;
						background: url('../images/favorite-sprite.png');
					}
					&.already {
						button {
							background-position-x: 100%;
						}
					}
					&:hover {
						button {
							background-position-x: 50%;
						}
					}
				}
				.action-retweet {
					button {
						border:none;
						width: 19px;
						height: 16px;
						background: url('../images/retweet-sprite.png');
					}
					&.already {
						button {
							background-position-x: 100%;
						}
					}
					&:hover {
						button {
							background-position-x: 50%;
						}
					}
				}
				.action-more {
					padding-top: 5px;
					padding-bottom: 5px;
					font-size: 6px;
					color: #ADAFB0;
					position: relative;
					top: 2px;
					&:hover {
						cursor: pointer;
					}
				}
			}
			.detail-metadata {
				color: $search-grey;
				margin-top: 11px;
				text-align: left;
			}
			// Processing imgs layout
				.images-wrapper {
					margin-top: 8px;
					border-radius: 8px;
					img {
						width: 100%
					}
					img.landscape {
						width: auto;
						height: 100%;
					}
				}
				.images-wrapper.showdetail {
					overflow: visible;
					max-height: initial;
					img {
						width: 100%;
						height: auto;
					}
					img.landscape {
						width: auto;
						height: 100%;
					}
				}
				.images-wrapper.showcomposition {
					max-height: initial;
				}
				.images-wrapper {
					.single-masonry-item {
						height: auto;
						width: auto;
						max-width: 100%;
						max-height: 560px;
						overflow: hidden;
					}
					.double-masonry-item {
						width: 49%;
						max-height: 250px;
						float: left;
						overflow: hidden;
						&:first-child {
							margin-right: 1%;
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
						}
						&:last-child {
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
						}
					}
					.triple-masonry-item {
						width: 49%;
						float: left;
						overflow: hidden;
						&:first-child {
							height: 250px;
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
							margin-right: 1%;
						} 
						&:nth-child(2) {
							margin-bottom: 5px;
							height: 123px;
							border-top-right-radius: 5px;
						}
						&:last-child {
							height: 123px;
							border-bottom-right-radius: 5px;
						}
					}
					.quad-masonry-item {
						width: 49%;
						height: 123px;
						position: relative;
						float: left;
						overflow: hidden;
						&:first-child {
							margin-bottom: 6px;
							margin-right: 1%;
							border-top-left-radius: 5px;
						}
						&:nth-child(2) {
							margin-bottom: 6px;
							border-top-right-radius: 5px;
						}
						&:nth-child(3) {
							border-bottom-left-radius: 5px;
							margin-right: 1%;
						}
						&:last-child {
							border-bottom-right-radius: 5px;
						}
					}
				}
			// End processing imgs layout
		}
	}

